<template>
  <el-button  @click="saveChartDesignerData">保存</el-button>
  <el-button >指标A</el-button>
  <el-button >指标B</el-button>
  <div id="dataDrilling_8" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {onMounted} from 'vue';
import report from './getSaveData.json'
import _onupdatedatasetlist from './onUpdateDatasetList_商品区域销售.json'
import _onupdatedata from './onUpdateData_商品区域销售_商品季度销售.json'
let designer;
//数据集
let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]

}


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log("...dataDrilling.vue....onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve(_onupdatedatasetlist)
  })
}

option.onUpdateDatasetList = onUpdateDatasetList

//正常应该是和报表设计器一样，这里的x个表结构，对于报表设计器/bi设计器来说，是外部数据源的待选数据集列表
function onUpdateData(datasets, params) {
  console.log("...dataDrilling.vue....onUpdateData is called,",datasets,params);
  return new Promise((resolve, reject) => {
    resolve(_onupdatedata)
  })
}
option.onUpdateData = onUpdateData
onMounted(async() => {
  designer = new XZChartDesigner("#dataDrilling_8", option, report);
})

function saveChartDesignerData() {
  console.log('getSaveData:',designer.getSaveData())
  console.log('getSaveData().config:',designer.getSaveData())
  console.log('getSaveData().data.dataConfig:',designer.getSaveData().data.dataConfig)

}

</script>

<style scoped>

</style>
